<template>
    <div>
        <div class="xx-grid">
            <code-card  @click.native="goEdit(item)" v-for="(item,i) in  cards" :key="i" :title="item.title" :author="item.name" :headimg="item.img==null?'/img/code.jpg':item.img"></code-card>
        </div>

    </div>
</template>

<script>
import CodeCard from '../components/CodeCard.vue'
import API from '../api/index'
export default {
    name: 'YourWork',
    components: {
        CodeCard
    },
    data() {
        return {
            cards: [],
            pageCount: 1,
            pageIndex: 0
        }
    },
    computed: {

    },

    mounted() {
        this.getSnippetByUserid()
        this.$root.$emit('switchCollapse', false)
        // this.$root.$on('getSnippetByUserid', ()=> {  //监听事件，这里$root很重要，不懂去官网介绍
        //     this.getSnippetByUserid()
        // })
        // this.$root.$on('cleanSnippetByUserid', ()=> {  //监听事件，这里$root很重要，不懂去官网介绍
        //     this.cards=[]
        // })
    },
    methods: {
        goEdit(item) {
            console.log(item)
            this.$root.$emit('changeDefaultActive', '/myvscode')
            this.$router.push({ path: '/myvscode', query: { snippet: item.id } })
        },
        getSnippetByUserid() {
            this.axios(API.snippet.getSnippetByUserid()).then(res => {
                console.log(res.data)
                this.cards = this.cards.concat(res.data.data.list)
                this.pageCount = res.data.data.lastPage
            }).catch((e) => {
                console.log(e)
                this.$root.$emit('showLogin', true)
            })
        }
    }
}
</script>

<style scoped>
    .xx-grid{
        margin:10px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        -webkit-box-align: start;
        -webkit-align-items: start;
        -ms-flex-align: start;
        align-items: start;
        justify-items: center;
        grid-gap: 4rem 3rem;
    }
    @media screen and (max-width: 600px) {
        .xx-grid{
            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        }
    }
</style>
